<template>
	<div class="main">
		<ul class="tab">
			<li @click="goto(1)">
				<span class="active">单项</span>
			</li>
			<li @click="goto(2)">
				<span>综合</span>
			</li>
			<li @click="goto(3)">
				<span>历史趋势分析</span>
			</li>
		</ul>
		<div class="singleWrap">
			<ul class="single">
				<li v-for="item in formData" :key="item.itemName">
					<div class="left">
						<img src="./../../assets/images/icon_1000run.png" v-if="item.itemName == '1000米跑'">
						<img src="./../../assets/images/icon_top.png" v-if="item.itemName == '引体向上'">
						<img src="./../../assets/images/icon_fhl.png" v-if="item.itemName == '肺活量'">
						<img src="./../../assets/images/icon_50run.png" v-if="item.itemName == '50米跑'">
						<img src="./../../assets/images/icon_zuoweitiqianqu@2x.png" v-if="item.itemName == '坐位体前屈'">
						<img src="./../../assets/images/icon_jump.png" v-if="item.itemName == '立定跳远'">
						<img src="./../../assets/images/icon_BMI.png" v-if="item.itemName == 'BMI'">
						<img src="./../../assets/images/icon_800run.png" v-if="item.itemName == '800米跑'">
						<img src="./../../assets/images/icon_qian.png" v-if="item.itemName == '仰卧起坐'">
						<p>{{item.itemName}}</p>
					</div>
					<div class="middle">
						<div class="top">数值：<i>{{item.result}}</i></div>
						<div>得分：<i>{{item.score}}</i></div>
					</div>
					<div class="right">
						<div class="top">定级</div>
						<div v-if="item.rank == '及格'||item.rank == '正常'||item.rank == '良好'||item.rank == '优秀'">
							<span class="green">{{item.rank}}</span>
						</div>
						<div v-else>
							<span class="red">{{item.rank}}</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>

export default {
	data () {
		return {
			//表单
			formData:[],
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/one',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
					annual:this.common.getCookie('year'),
				}
			})
			.then(res=>{
				console.log(res);
				if(res.data.code == 1){
					this.formData = res.data.data.scScores;
				}
			})
		},
		//跳转
		goto:function(n){
			if(n == 1){

			}
			else if(n == 2){
				this.$router.replace({path:"/syn"});
			}
			else if(n == 3){
				this.$router.replace({path:"/history"});
			}
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "体质数据";
	}
}
</script>

<style lang="scss" scoped>
	.singleWrap{
		padding: 15px;
		.single{
			background-color: #fff;
			border-radius: 6px;
			li{
				position: relative;
				display: flex;
				align-items: center;
				position: relative;
				padding: 12px 15px;
				background-color: #fff;
				border-radius: 10px;
				.left{
					width: 28%;
					text-align:center;
					img{
						display: inline;
						height: 0.5rem;
					}
				}
				.middle{
					width: calc(70% - 1rem);
					margin-left: 10%;
					text-align: left;
					i{
						color: #999;
					}
					.top{
						height: 0.5rem;
						line-height: 0.5rem;
					}
				}
				.right{
					width: 1rem;
					text-align: center;
					span{
						color: #fff;
						padding: 5px 15px;
						border-radius: 15px;
						font-size: 14px;
					}
					.yellow{
						background-color: #FFAB3D;
					}
					.green{
						background-color: #06AC52;
					}
					.red{
						background-color: #FF4D4D;
					}
					.top{
						padding: 0 0 10px 0;
					}
				}
			}
			li:after{
				content: '';
				position: absolute;
				left: 15px;
				right: 15px;
				bottom: 0;
				border-bottom: 1px solid #eee;
			}
			li:last-child:after{
				border: none;
			}
		}
	}
</style>
